// 引入模块化处理的仓库
import React ,{useEffect}from 'react'
import useStore from '../store/index'
import {observer} from 'mobx-react-lite'

function asyncChannel() {
    // 创建响应式的数据源
    // const channerStore=useState()

    // 使用封装的useStore
    const store=useStore()

    useEffect(()=>{
        store.counterStore.setChangeList()
    },[])
  return (
    <div>
        <ul>
            {
                store.counterStore.channelList.map(item=>{
                    return <li key={item.id}>{item.name}</li>
                })
            }
        </ul>
        {/* 不推荐 */}
        <button onClick={()=>store.counterStore.channelList[0].name='testetstetetst'}>修改名字</button>
    </div>
  )
}

export default observer(asyncChannel)
